<!--
 * @Descripttion: 日志管理
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 13:06:01
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-30 19:31:17
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-notebook-2"></i>
          <span style="color: #00ffff">系统日志</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <div style="display: inline-flex">
          <el-input
            size="mini"
            v-model="query.operName"
            placeholder="输入用户名查询"
            class="handle-input mr10"
          ></el-input>
          <el-input
            size="mini"
            v-model="query.handleDetail"
            placeholder="输入操作内容查询"
            class="handle-input mr10"
          ></el-input>
          <el-select
            size="mini"
            v-model="query.handleType"
            placeholder="选择操作类型查询"
            class="handle-select mr10"
            style="width: 150px"
            :popper-append-to-body="false"
            clearable
          >
            <el-option label="全部" value="1"></el-option>
            <el-option label="查询操作" value="select"></el-option>
            <el-option label="修改操作" value="update"></el-option>
            <el-option label="新增操作" value="insert"></el-option>
            <el-option label="删除操作" value="delete"></el-option>
            <el-option label="上传操作" value="upload"></el-option>
            <el-option label="下载操作" value="download"></el-option>
            <el-option label="用户登录" value="login"></el-option>
            <el-option label="未知操作" value="unknown"></el-option>
          </el-select>
          <el-select
            size="mini"
            v-model="query.handleModule"
            placeholder="选择操作模块查询"
            class="handle-select mr10"
            style="width: 150px"
            :popper-append-to-body="false"
            clearable
          >
            <el-option label="全部" value="1"></el-option>
            <el-option label="用户模块" value="用户模块"></el-option>
            <el-option label="部门模块" value="部门模块"></el-option>
            <el-option label="数据集模块" value="数据集模块"></el-option>
            <el-option label="数据碰撞模块" value="数据碰撞模块"></el-option>
            <el-option label="电子档案模块" value="电子档案模块"></el-option>
            <el-option label="任务模块" value="任务模块"></el-option>
            <el-option label="日志模块" value="日志模块"></el-option>
            <el-option label="碰撞模型模块" value="碰撞模型模块"></el-option>
            <el-option label="字段类型模块" value="字段类型模块"></el-option>
            <el-option
              label="日期格式化规则模块"
              value="日期格式化规则模块"
            ></el-option>
            <el-option label="碰撞类型模块" value="碰撞类型模块"></el-option>
            <el-option label="规则模块" value="规则模块"></el-option>
            <el-option
              label="数据集字段模块"
              value="数据集字段模块"
            ></el-option>
            <el-option label="未知模块" value="未知模块"></el-option>
          </el-select>
          <SelectDataSE
            class="handle-select mr10"
            @getDateSE="getDateSE"
          ></SelectDataSE>
          <el-button
            size="mini"
            type="primary"
            class="button"
            icon="el-icon-search"
            style="margin-left: 214px"
            plain
            @click="handleSearch"
            v-waves
          >
            搜索
          </el-button>
        </div>
      </div>
      <!-- 表格数据-->
      <div class="ms-table" v-if="pageData.total != 0">
        <u-table :data="tableData" border style="width: 100%">
          <u-table-column
            align="center"
            fixed
            prop="ip"
            label="访问IP"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="operName"
            label="用户名"
          ></u-table-column>
          <u-table-column align="center" prop="handleType" label="操作类型">
            <template #default="{ row }">
              {{ row.handleType | handleType }}
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="handleModule"
            label="操作模块"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="handleDetail"
            label="操作内容"
            width="500"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="createTime"
            label="操作时间"
            show-overflow-tooltip
            width="300"
          ></u-table-column>
        </u-table>
      </div>
      <transition name="slide-left">
        <div
          style="margin-top: 10vh; text-align: center"
          v-if="pageData.total == 0"
        >
          <el-image
            style="width: 300px; height: 300px"
            :src="require('@/assets/img/null.png')"
          ></el-image>
          <br />
          <span class="text">暂无数据，请先录入数据</span>
        </div>
      </transition>
      <!-- 表格分页  -->
      <div class="pagination" v-if="pageData.total != 0">
        <pagination
          :total="pageData.total"
          :page="pageData.page"
          :size="pageData.size"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { select_logs } from '@/api/index.js'
  import pagination from '@/components/public/pagination.vue'
  import SelectDataSE from '@/components/select/SelectDataSE/index.vue'
  export default {
    // 组件名称
    name: 'logIndex',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { SelectDataSE, pagination },
    filters: {
      handleType(row) {
        switch (row) {
          case 'select':
            return '未知操作'
            break
          case 'unknown':
            return '查询操作'
            break
          case 'update':
            return '修改操作'
            break
          case 'insert':
            return '新增操作'
            break
          case 'delete':
            return '删除操作'
            break
          case 'upload':
            return '上传操作'
            break
          case 'download':
            return '下载操作'
            break
          case 'login':
            return '用户登录'
            break
          default:
            break
        }
      },
    },
    // 组件状态值
    data() {
      return {
        query: {
          handleType: '',
          handleModule: '',
          handleDetail: '',
          operName: '',
          startDateTime: '',
          endDateTime: '',
        },
        pageData: {
          total: 1,
          size: 20,
          pages: 1,
        },
        tableData: [],
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      /**
       * @description 页面基础函数 包括页面数据获取、搜索按钮/excel导出等
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      handleSearch() {
        this.getData()
      },
      getData() {
        let handleType
        let handleModule
        if (this.query.handleType == '1') {
          handleType = ''
        } else {
          handleType = this.query.handleType
        }
        if (this.query.handleModule == '1') {
          handleModule = ''
        } else {
          handleModule = this.query.handleModule
        }
        let handleDetail = this.query.handleDetail
        let operName = this.query.operName
        let startDateTime = this.query.startDateTime
        let endDateTime = this.query.endDateTime
        let currentPage = this.pageData.pages
        let size = this.pageData.size
        var qs = require('qs')
        var data = qs.stringify({
          handleType: handleType,
          handleModule: handleModule,
          handleDetail: handleDetail,
          operName: operName,
          startDateTime: startDateTime,
          endDateTime: endDateTime,
          currentPage: currentPage,
          size: size,
        })
        select_logs(data).then((res) => {
          this.tableData = res.data.records
          this.pageData.total = res.data.total
          this.pageData.pages = res.data.current
          this.pageData.size = res.data.size
        })
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      /* 日期选择器返回数据 */
      getDateSE(row) {
        if (row != null) {
          this.query.startDateTime = row[0]
          this.query.endDateTime = row[1]
        } else {
          this.query.startDateTime = ''
          this.query.endDateTime = ''
        }
      },
      sizeChange(row) {
        this.pageData.size = row
        this.handleSearch()
      },
      pageChange(row) {
        this.pageData.pages = row
        this.handleSearch()
      },
    },
    created() {},
    mounted() {
      this.getData()
    },
  }
</script>

<style scoped>
  .pagination {
    float: left;
  }
  .handle-box {
    margin-bottom: 20px;
  }
  .handle-select {
    width: 200px;
  }

  .handle-input {
    width: 200px;
    display: inline-block;
  }
  .mr10 {
    margin-right: 10px;
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
</style>
<style lang="less" scoped>
  /deep/.el-dialog {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.8);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
<style lang="less" scoped>
  .ms-table {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.3);
    overflow: hidden;
  }
  /*最外层透明*/
  .ms-table /deep/ .el-table,
  .ms-table /deep/ .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
  /* 表格内背景颜色 */
  .ms-table /deep/ .el-table th,
  .ms-table /deep/ .el-table tr,
  .ms-table /deep/ .el-table td {
    background-color: transparent !important;
    //表格字体颜色
    color: #ffffff;
  } /* 表格表头字体颜色 */
  /deep/ .el-table thead {
    color: #44d3e4;
    font-weight: 500;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    background: transparent;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #fff;
  }
  .vButton {
    background: rgba(0, 242, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #207be0;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
</style>
